<template>
  <div class="dashboard-header no-user-select">
    <div class="logo">logo</div>
    <div class="main">
      <a-input-search placeholder="搜索项目" style="width: 120px" class="search" />

      <div class="main-center">
        <a-dropdown :trigger="['click']" placement="bottomCenter">
          <div class="item">
            组织空间
            <a-icon class="icon" type="down" />
          </div>
          <div slot="overlay">
            <div class="org-space">
              <!-- 所属组织 -->
              <ul>
              	<li></li>
              </ul>
              <div class="footer">
                <a-button type="primary">创建组织空间</a-button>
              </div>
            </div>
          </div>
        </a-dropdown>

        <div class="item">素材广场</div>
      </div>
      <!-- end .main-center -->
    </div>
    <div class="avatar">
      <a-icon class="tongzhi" type="bell" />
      <a-avatar shape="square" size="default">长路</a-avatar>
      <!-- TODO 下拉，有一个功能是清除请求缓存（免费版一些接口在前端做缓存） -->
    </div>
  </div>
</template>

<script></script>

<style lang="less">
.dashboard-header {
  .ant-input {
    height: 26px;
    border-radius: 50px !important;
    padding-left: 20px;
  }
  ::-webkit-input-placeholder {
    color: #999;
    font-size: 12px;
  }
}
.org-space{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 320px;
  min-height: 320px;
  max-height: calc(100vh - 80px);
  font-size: 0.9rem;
  background-color: white;
  box-shadow: rgba(39, 54, 78, 0.12) 0px 2px 10px 0px, rgba(39, 54, 78, 0.12) 4px 12px 40px 0px;

  .footer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75px;

  }

}
</style>
<style lang="less" scoped>
.dashboard-header {
  display: flex;
  height: 100%;
  box-shadow: rgba(141, 158, 167, 0.13) 0px 4px 10px 0px;
  .logo,
  .main,
  .avatar {
    // height: 100%;
    display: flex;
    align-items: center;
    .tongzhi {
      font-size: 24px;
      margin: 0 27px;
    }
    .ant-avatar {
      margin-right: 27px;
      background-color: #7265e6;
      vertical-align: middle;
    }
  }
  .logo {
    width: @dashboard-left-w;
    padding: 0 @dashboard-left-content-padding;
  }
  .main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 0 10px;

    .search {
      .ant-input {
        border-radius: 50px !important;
      }
    } //
    .main-center {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin-right: 8px;
        padding: 0 12px;
        cursor: pointer;
        .icon {
          margin-left: 8px;
          display: flex;
          align-items: center;
        }
      }
      .item:hover {
        background-color: rgb(242, 242, 242);
      }

    }// end .main-conter
  }
}
</style>
